<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Visual Question Answer</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div class="back">
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="jumbotron">
                      <h1 class="display-4">Visual Question Answer</h1>
                      <h3 class="lead">The VQA is a interesting and difficult task. Return a natural language answer given a picture and a question about the picture. </h3>
                      <hr class="my-4">
                      <p>We have proposed a new model, the adaptive relational network model, please try our last version model.</p>
                      <a class="btn btn-primary btn-lg" href="https://gitee.com/fsdkhfskf/Adaptive-Relational-Network-Model" role="button">Learn more</a>
                    </div>
                </div>
            </div>
            <div class="row clearfix">
                <div class="col-md-6 column">
                    <img src="../static/image/1.jpg" class="img-fluid" id="view" alt="Responsive image">
                    <div id="opration" class="row clearfix">
                        <form>
                          <div class="form-group">
                            <label for="exampleFormControlFile1">Example file input</label>
                            <input type="file" class="form-control-file" id="exampleFormControlFile1" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" "imgPreview(this)">
                          </div>
                        </form>
                        <button onclick="uploadImage()" type="button" class="btn btn-success">uploadImage</button>
                        <!--<input type="submit" class="form-control-file" value="uploadImage" id="upload">-->
                    </div>
                </div>
                <div class="col-md-6 column">
                    <div>
                        <form id="form">
                            <label for="exampleInputEmail1">Input question</label>
                            <input name="question" type="text" class="form-control" id="exampleInputQuestion">
                        </form>
                        <button onclick="submit()" type="button" class="btn btn-primary">Submit</button>
                    </div>
                    <div class="answer">
                        <label>the answer for the above question</label>
                        <input id="answer" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <!--<div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="jumbotron text-center">
                        <p>author：Fangjun data：2020/4/10</p>
                    </div>
                </div>-->
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
function imgPreview(fileDom) {
        //判断是否支持FileReader
     if(window.FileReader) {
     var reader = new FileReader();
     } else {
     alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
     }
     //获取文件
     var file = fileDom.files[0];
     var imageType = /^image\//;
     //是否是图片
     if(!imageType.test(file.type)) {
     alert("请选择图片！");
     return;
     }
     //读取完成
     reader.onload = function(e) {
     //获取图片dom
     var img = document.getElementById("view");
     //图片路径设置为读取的图片
     img.src = e.target.result;
     };
     reader.readAsDataURL(file);
}
uploadImage = function () {
    var fileDom = document.getElementById("exampleFormControlFile1");
    imgPreview(fileDom);
    var formData = new FormData();
    formData.append('file', $('#exampleFormControlFile1')[0].files[0]);
    $.ajax({
        type: 'POST',
        cache: false,
        url: '/upload',
        data: formData,
        contentType: false,
        processData: false,
        success: function(data){
            var rs = eval("("+data+")");
             if(rs.state==1){
             tipTopShow('上传成功！');
             }else{
             tipTopShow(rs.msg);
             }
        },
        error: function (e) {
            alert("error")
        }

    })
};
submit = function () {
    $.ajax({
        async: false,
        type: 'POST',
        url: 'answer',
        data: $('#form').serialize(),
        success: function (data) {
            var input = document.getElementById('answer');
            input.value = data
        },
        error: function (e) {
            alert("error")
        }
    });
}
</script>
<style>
    .answer{
        margin-top: 100px;
    }
    .btn-success{
        height: 50px;
    }
    .btn-primary{
        margin-top: 20px;
    }
    #upload{
        width: 150px;
        height: 50px;
    }
    #opration{
        margin-top: 30px;
        margin-left: 15px;
    }
</style>
</html>